<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :node-data="company" :is-root="true" @addDepartment="addDepartment" />
        <!-- 以上是公司数据 -->
        <hr>
        <!-- 树形插槽   :data="departs"绑定data里面的departs元素 -->
        <el-tree
          :data="departs"
          :default-expand-all="true"
          :expand-on-click-node="false"
        >
          <!-- 具名插槽 遍历data -->
          <template #default="{data}">
            <TreeTools
              :node-data="data"
              :is-root="false"
              :del-department="getDepar"
              @addDepartment="addDepartment"
              @deditepartment="deditepartment"
            />
            <template />
          </template></el-tree>
      </el-card>
      <AddDept
        ref="addDept"
        :show-dialog.sync="showDialog"
        :node-data="nodeData"
        @addDepartment="getDepar"
      /></div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import AddDept from '@/views/departments/components/addtree.vue'
// import { listToTree } from '@/utils/index'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      showDialog: false, // 显示窗体,
      nodeData: {},
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      departs: [

      ]

    }
  },
  created() {
    this.getDepar()
  },
  methods: {
    addDepartment(nodeData) {
      // 弹窗等于弹窗？nodeData当前点击的节点
      this.nodeData = nodeData
      // 点击了新增按钮把弹窗状态改成true
      this.showDialog = true
    },
    async deditepartment(nodeData) {
      // 这个是调用子组件的方法
      await this.$refs.addDept.getdepartment(nodeData.id)
      // nodeData是tree-tools传过来的点击当前的节点然后等于父组件的
      this.nodeData = nodeData
      // 让弹窗的状态变回来true
      this.showDialog = true
    },
    // 创建一个函数
    async getDepar() {
      // 获取数据
      const { depts } = await getDepartments()
      // 调用数据，拿到下面函数的元素和pid给到上面数组
      this.departs = this.listToTree(depts, '')
      // console.log(this.departs)
    },
    listToTree(list, topPid) {
      //   // 定义一个空数组，接受每次返回来的数据
      //   const arr = []
      //   // 然后遍历list，element这个是里面每个元素
      //   list.forEach(element => {
      //     // 判定pid是不是等于父级的id
      //     if (element.pid === topPid) {
      //       // 然后把自己的id放进去子集里面
      //       element.children = this.listToTree(list, element.id)
      //       // 然后push进去list里面的每个元素里
      //       arr.push(element)
      //     }
      //   })
      //   // 返回arr
      //   return arr
      // 没有递归算法
      list.forEach(element => {
        // 如果list里面的每个元素的id不等于空，就是不等于顶级的节点
        if (element.pid !== topPid) {
          // console.log(element.pid)
          // console.log(topPid)
          // 那么就去查找里面的id加到变量里面
          const parent = list.find(el => el.id === element.pid)
          // console.log(parent)
          // 判断有没有这个pid
          if (parent) {
            // 就把parent的子元素加进去或者空数组
            parent.children = parent.children || []
            // 然后把每个子元素加进去
            parent.children.push(element)
            // element这个是每个子节点
            // console.log(element)
          }
        }
      })
      // 过滤最顶层的那个id
      return list.filter(el => el.pid === topPid)
    }

  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
.pointer{
 cursor: pointer;
}
</style>
